// 箭头 方向,尺寸,颜色
// 使用 @include arrow(right, 10px, blue);
@mixin arrow($direction, $size, $color) {
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
  border-width: $size;
  cursor: pointer;
  @if $direction==top {
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent $color transparent;
    border-top: none;
  } @else if $direction==bottom {
    border-style: solid dashed dashed dashed;
    border-color: $color transparent transparent transparent;
    border-bottom: none;
  } @else if $direction==right {
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent $color;
    border-right: none;
  } @else if $direction==left {
    border-style: dashed solid dashed dashed;
    border-color: transparent $color transparent transparent;
    border-left: none;
  }
}

// clearfix
@mixin clr {
  &:after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    line-height: 0;
    overflow: hidden;
  }
  *height: 1%;
}

/*渐变(方向,颜色1,颜色2,颜色3）*/
// 使用 @include linear-gradient(right, green, red, blue);
@mixin linear-gradient($direction: bottom, $color1: transparent, $color2: #306eff, $color3: transparent) {
  //background: -webkit-linear-gradient($direction,$colorTop, $colorCenter, $colorBottom); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient($direction, $color1, $color2, $color3);
  /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient($direction, $color1, $color2, $color3);
  /* Firefox 3.6 - 15 */
  background: linear-gradient(to $direction, $color1, $color2, $color3);
  /* 标准的语法 */
}
/*渐变(角度,颜色1,颜色2,颜色3）*/
// 使用 @include linear-gradient(90edg, green, red, blue);
@mixin linear-gradient-edg($edg: 0edg, $color1: transparent, $color2: #306eff, $color3: transparent) {
  //background: -webkit-linear-gradient($direction,$colorTop, $colorCenter, $colorBottom); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient($edg, $color1, $color2, $color3);
  /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient($edg, $color1, $color2, $color3);
  /* Firefox 3.6 - 15 */
  background: linear-gradient($edg, $color1, $color2, $color3);
  /* 标准的语法 */
}

/* 定义滚动条样式 圆角和阴影不需要则传入null */
@mixin scrollBar($width: 10px, $height: 10px, $outColor: $baseColor, $innerColor: $bgGrey, $radius: 5px, $shadow: null) {
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  &::-webkit-scrollbar {
    width: $width;
    height: $height;
    background-color: $outColor;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  &::-webkit-scrollbar-track {
    @if ($shadow !=null) {
      -webkit-box-shadow: $shadow;
    }

    @if ($radius !=null) {
      border-radius: $radius;
    }

    background-color: $outColor;
  }

  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    @if ($shadow !=null) {
      -webkit-box-shadow: $shadow;
    }

    @if ($radius !=null) {
      border-radius: $radius;
    }

    background-color: $innerColor;
    border: 1px solid $innerColor;
  }
}
